<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-verify demo</title>
    <script src="vue.min.js"></script>
    <script src="../dist/vue-verify.js"></script>
</head>
<body>
<div id="app">
    <p>
        <label>name:</label>
        <input v-model="name">
        <template v-if="verify.name.$dirty">
            <span v-if="verify.name.required">name reqiured</span>
            <span v-if="verify.name.maxLength">please enter no more than 16 characters</span>
        </template>
    </p>
    <p>
        <label>cconfirm name:</label>
        <input v-model="confirm.name">
        <template v-if="verify.confirm.name.$dirty">
            <span v-if="verify.confirm.name.required">reqiured</span>
            <span v-if="verify.confirm.name.equalTo">please enter the same name again</span>
        </template>
    </p>
    <p>
        <label></label>
    </p>

    <p>
        <label>age:</label>
        <input v-model="age">
        <template v-if="verify.age.$dirty">
            <span v-if="verify.age.min">age must greater than or equal to 16</span>
            <span v-if="verify.age.max">age must smaller than or equal to 80</span>
        </template>
    </p>

    <p>
        <label>father:</label>
        <input v-model="family.father">
        <template v-if="verify.family.father.$dirty">
            <span v-if="verify.family.father.required">father required</span>
            <span v-if="verify.family.father.pattern">father name must be 5-36 letters</span>
        </template>
    </p>

    <p>
        <button type="button" @click="reset">reset</button>
        <button type="button" v-if="verify.$dirty&&verify.$valid">submit</button>
    </p>
    <hr>
    <p>vm.verify</p>
    <pre>{{verify|json}}</pre>
</div>
<script>
    Vue.config.debug = true
    Vue.use(vueVerify)
    //add to window for debug
    window.vm = new Vue({
        el: "#app",
        data: {
            name: null,
            age: 0,
            family: {
                father: null
            },
            confirm: {
                name: null
            }
        },
        methods: {
            reset: function () {
              this.$verifyReset()
            }
        },
        created: function () {
            this.$verify({
                name: {
                    required: true,
                    maxLength: 16
                },
                age: {
                    min: 15,
                    max: 80
                },
                //you must specify a model path,not support recursion
                "family.father": {
                    required: true,
                    pattern: /^\w{5,36}$/
                },
                "confirm.name": {
                    required: true,
                    equalTo: "name"
                }
            })
        }
    })
</script>
</body>
</html>